<template>
  <a-modal
    title="设置权限"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-tree
      v-if="treeData && treeData.length > 0"
        :defaultExpandAll="true"
        :replaceFields="props"
        show-icon
        @check="onCheck"
        v-model="checkedKeys"
        checkable
        :tree-data="treeData">
        </a-tree>
    </a-spin>
  </a-modal>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { 
    sysUserTypeIdMatchingTree,
    sysAddUserTypeMenu,
    sysUserTypeCodeTree
 } from '@/api/manage/userType'
import { 
    sysRoleDistributeMenu,
    getSysRoleIdTree
 } from '@/api/manage/role'
   import { 
     sysGetMenuTree
 } from '@/api/manage/menus'
export default {
  data () {
    return {
        visible: false,
        confirmLoading: false,
        checkedKeys: [],
        allCheckedNodes:[],
        test: [],
        treeData:[],
        typeId:'',
        roleId:'',
        props:{
          title:'menuName',
          key:''
        },
        moduleType:''
    }
  },
  computed: {
    ...mapGetters(['userInfo','routers'])
  },
  methods: {
    add(item,moduleType,typeId) {
      this.props.key = moduleType;
      this.checkedKeys = [];
      this.test = [];
      this.allSelectedNodes = [];
      this.treeData = [];
      if(this.userInfo.type === 1){
        this.sysDataLoad(item,moduleType,typeId);
      }else{
        this.comanyDataLoad(item,moduleType,typeId);
      }
    },
    async sysDataLoad(item,moduleType,typeId){
      const {code,data} = this.props.key === 'menuId' ? await sysGetMenuTree(1) : await sysUserTypeCodeTree(item.roleTypeCode);
      if(code === '1'){
        if(data && data.length >=1){
          this.treeData = data;
          this.deepList(this.treeData);
          this[typeId] = item[typeId];
          this.getTreeIdKeysArray();
        }else{
          this.$message.info('请先创建菜单！')
        }
      }
    },
    comanyDataLoad(item,moduleType,typeId){
      this.treeData = this.routers;
      this.deepList(this.treeData);
      this[typeId] = item[typeId];
      this.getTreeIdKeysArray();
    },
    async getTreeIdKeysArray(){
      const {code,data} = this.props.key === 'menuId' ? await sysUserTypeIdMatchingTree(this.typeId) : await getSysRoleIdTree(this.roleId);
      if(code === '1'){
        const result = [...new Set(this.test)].filter((item) => new Set(eval(data)).has(item));
        this.checkedKeys = [...result];
        this.allCheckedNodes = data;
        this.visible = true;
      }
    },
    deepList(data){
      data.map((item) => {
        if (item.children && item.children.length > 0) {
          this.deepList(item.children);
        } else {
           this.test.push(item[this.props.key]);
        }
      });
    },
    onCheck(checkedKeys,info){
      this.allCheckedNodes = checkedKeys.concat(info.halfCheckedKeys);
      this.checkedKeys = checkedKeys;
    },
    async handleSubmit () {
      if ( this.allCheckedNodes.length >=1) {
          let params = {};
          if(this.props.key === 'typeMenuId'){
              params.roleId = this.roleId;
              params.typeMenuIds = this.allCheckedNodes
          }else if(this.props.key === 'menuId'){
              params.typeId = this.typeId;
              params.menuIds = this.allCheckedNodes
          }
          const {code} = this.props.key === 'menuId' ? await sysAddUserTypeMenu(params) : await sysRoleDistributeMenu(params);
          if(code === '1'){
            this.visible = false
            this.$emit('ok')
          }
      } else {
          this.$message.error('请勾选权限菜单！')
      }
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
